<!-- 实操视频 -->
<template>
  <div class="practicalVideo-page">
    <div class="pck-video">
      <div class="pck-video-l">
        <div class="pck-video-l-v">
          <video class="myVideo" ref="videoPlayer" @loadedmetadata="getDuration" @timeupdate="updateCurrentTime"
                 currentTime="currentTime"
                 @play="playClick" @pause="pauseClick"
                 :src="videoLink" controls controlslist="nodownload noplaybackrate"></video>
        </div>
        <div class="pck-video-l-title" v-if="baseInfo.title">
          <div class="pck-video-l-title-name">{{ baseInfo.title }}</div>
        </div>
        <div class="pck-video-l-time" v-if="timeDuration">{{ timeDuration }}</div>
        <div class="pck-video-l-simple" v-html="baseInfo.abstract"></div>
      </div>
      <div class="pck-video-r">
        <div class="pck-video-r-box">
          <div class="pck-video-r-title">
            <div>视频列表</div>
            <el-select v-model="userInfo.appraisal_id" @change="changeClick">
              <el-option
                  v-for="item in selList"
                  :key="item.id"
                  :label="item.appraisal"
                  :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="pck-video-r-con">
            <div style="margin-bottom: 20px" v-if="IN1">
              <div class="tree-box">
                <div class="tree-box-line" @click="zjClick">
                  <div class="tree-box-line-l">
                    <img class="img1" src="@/assets/icon/san2.png" alt="" v-if="objShow">
                    <img class="img1" src="@/assets/icon/san1.png" alt="" v-else>
                    <img src="@/assets/icon/wen.png" alt="">
                    <div class="tree-box-line-title">总结视频</div>
                  </div>
                </div>
                <div class="tree-box-line"
                     v-if="objShow"
                     :class="Tindex == index ? 'tree-box-line-active' : ''" style="padding-left: 50px"
                     v-for="(item, index) in objList"
                     @click="handleClick(item, 0, index)">
                  <div class="tree-box-line-l">
                    <img src="@/assets/icon/wen2.png" alt="">
                    <div class="tree-box-line-title"> {{ item.title }}</div>
                  </div>
                  <div class="tree-box-line-r">{{ (item.percentage * 100 ).toFixed(0) }}%</div>
                </div>
              </div>
              <div class="tree-box" v-for="(item, index) in treeList" v-if="IN2">
                <div class="tree-box-line" @click="handleClick(item, 1, index)">
                  <div class="tree-box-line-l">
                    <img class="img1" src="@/assets/icon/san1.png" alt="" v-if="item.isShow1 == false">
                    <img class="img1" src="@/assets/icon/san2.png" alt="" v-if="item.isShow1 == true">
                    <img src="@/assets/icon/wen.png" alt="">
                    <div class="tree-box-line-title">{{ item.appraisal_title || '鉴定点' }}：{{item.title}}</div>
                  </div>
                </div>
                <div v-if="item.isShow1">
                  <div class="tree-box-line" :class="item.isShow2 && !item.isShow3 && !item.isShow4 ? 'tree-box-line-active' : ''" style="padding-left: 30px" @click="handleClick(item, 2, index)">
                    <div class="tree-box-line-l">
                      <img class="img1" src="@/assets/icon/san1.png" alt="" v-if="item.isShow2 == false">
                      <img class="img1" src="@/assets/icon/san2.png" alt="" v-if="item.isShow2 == true">
                      <img src="@/assets/icon/wen2.png" alt="">
<!--                      <img src="@/assets/icon/wen1.png" alt="" v-if="item.isShow2 == true">-->
                      <div class="tree-box-line-title">{{ item.device_name }}</div>
                    </div>
                  </div>
                  <div v-if="item.isShow2">
                    <div class="tree-box-line" style="padding-left: 80px" :class="item.isShow3 ? 'tree-box-line-active' : ''" @click="handleClick(item, 3, index)">
                      <div class="tree-box-line-l">
                        <img src="@/assets/icon/wen2.png" alt="">
                        <div class="tree-box-line-title">教学讲解视频</div>
                      </div>
                      <div class="tree-box-line-r">{{ (item.percentage * 100 ).toFixed(0) }}%</div>
                    </div>
                    <div class="tree-box-line" style="padding-left: 80px" :class="item.isShow4 ? 'tree-box-line-active' : ''" @click="handleClick(item, 4, index)">
                      <div class="tree-box-line-l">
                        <img src="@/assets/icon/wen2.png" alt="">
                        <div class="tree-box-line-title">模拟现场考试视频</div>
                      </div>
                      <div class="tree-box-line-r">{{ (item.link1_percentage * 100).toFixed(0) }}%</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-empty description="暂无数据"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getCareerAppraisal, getPracticalVideo, getPracticalVideoDetail, getProgress, getSaveProgress} from "@/api";

export default {
  name: "practicalVideo",
  data(){
    return {
      objList: [], // 总结视频
      treeList: [],
      baseInfo: {},
      userInfo: '',
      courseId: '',
      objShow: true,
      Tindex: 0,
      videoLink: '', // 视频链接
      selList: [],
      IN1: true,
      IN2: true,
      timer: null,
      currentTime: 0, //当前播放时间
      duration: 0, // 视频总时长,
      progress: 0, // 当前播放进度
      progressType: 0, // 0总结视频。3教学讲解视频.4模拟现场考试视频
      progressIndex: 0,
      timeDuration: 0, // 视频时长
    }
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.getPracticalVideoList()
    this.getCareerAppraisalList()
  },
  methods: {
    // 获取鉴定站列表
    getCareerAppraisalList() {
      getCareerAppraisal().then(res => {
        this.selList = res.data
      })
    },
    // 选择鉴定站
    changeClick(e) {
      this.userInfo.appraisal_id = e
      this.getPracticalVideoList()
    },
    // 获取实操视频列表
    getPracticalVideoList() {
      let params = {
        page: 1,
        list_rows: 9999,
        type: 1,
        appraisal_id: this.userInfo.appraisal_id
      }
      getPracticalVideo(params).then(res => {
        if (res.code == 1) {
          this.objList = res?.data?.list?.data || []
          if (res?.data?.list?.data.length > 0) {
            this.IN1 = true
          } else {
            this.IN1 = false
          }
          this.objShow = true
          this.courseId = this.objList[0].course_id
          if (res?.data?.list?.data.length > 0) {
            this.getDetail(1)
          }
        }
      })
      let params1 = {
        page: 1,
        list_rows: 9999,
        type: 2,
        appraisal_id: this.userInfo.appraisal_id
      }
      getPracticalVideo(params1).then(res => {
        if (res.code == 1) {
          if (res?.data?.list?.data.length > 0) {
            this.IN2 = true
          } else {
            this.IN2 = false
          }
          this.treeList = res?.data?.list?.data.map(item => {
            return {
              ...item,
              isShow1: false,
              isShow2: false,
              isShow3: false,
              isShow4: false,
            }
          })
        }
      })
    },

    // 获取详情
    getDetail(n) {
      let params = {
        course_id: this.courseId
      }
      getPracticalVideoDetail(params).then(res=> {
        if (res.code == 1) {
          this.baseInfo = res?.data?.detail || {}
          if (n == 1) {
            this.videoLink = this.baseInfo.video_link
          } else {
            this.videoLink = this.baseInfo.video_link1
          }
          this.getProgress()
        }
      })
    },
    // 初始化获取视频总时长
    getDuration(e) {
      const video = this.$refs.videoPlayer;
      if (video) {
        let seconds = video.duration
        let hours = Math.floor(seconds / 3600);
        seconds %= 3600;
        let minutes = Math.floor(seconds / 60);
        seconds %= 60;
        let a = hours == 0 ? '00' : hours < 10 ? '0' + hours : hours
        let b = minutes == 0 ? '00' : minutes < 10 ? '0' + minutes : minutes
        let c = seconds.toFixed(0) == 0 ? '00' : seconds.toFixed(0) < 10 ? '0' + seconds.toFixed(0) : seconds.toFixed(0)
        this.timeDuration = `${a}:${b}:${c}`
      }
    },
    // 设置开始播放时间
    setStartTime(e) {
      const video = this.$refs.videoPlayer;
      if (video) {
        video.currentTime = e || 0
      }
    },

    // 获取当前播放进度
    updateCurrentTime() {
      const video = this.$refs.videoPlayer;
      if (video) {
        this.currentTime = video.currentTime;
        this.duration = video.duration; // 视频总时长
        if (this.duration) {
          this.progress = this.currentTime / this.duration
        }
      }
    },
    // 获取当前视频播放进度
    getProgress() {
      let params = {
        course_id: this.courseId,
        video_link: this.videoLink
      }
      getProgress(params).then(res => {
        if (res.code == 1) {
          this.setStartTime(res.data)
        }
      })
    },
    // 保存播放进度
    getSaveProgress() {
      let params = {
        course_id: this.courseId,
        progress: this.progress.toFixed(2),
        video_link: this.videoLink,
        video_seconds: this.currentTime.toFixed(0)
      }
      getSaveProgress(params).then(res => {
        if (res.code == 1) {
          if (this.progressType == 0) {
            this.objList[this.Tindex].percentage = this.progress.toFixed(2)
          }
          if (this.progressType == 3) {
            this.treeList[0].percentage = this.progress.toFixed(2)
          }
          if (this.progressType == 4) {
            this.treeList[0].link1_percentage = this.progress.toFixed(2)

          }
        }
      })

    },
    // 启动播放
    playClick(e) {
      this.getStartTime()
    },
    // 暂停播放
    pauseClick(e) {
      clearInterval(this.timer)
      this.getSaveProgress()
    },
    // 开启定时器
    getStartTime() {
      let that = this
      that.timer = setInterval(()=> {
        that.getSaveProgress()
      }, 10000)
    },
    // zjClick 总结点击
    zjClick() {
      this.objShow = !this.objShow
    },
    handleClick(item, n, index) {
      this.progressType = n
      if (n == 0) {
        this.Tindex = index
        this.treeList = this.treeList.map(item => {
          return {
            ...item,
            isShow1: false,
            isShow2: false,
            isShow3: false,
            isShow4: false,
          }
        })
        this.courseId = item.course_id
        this.getDetail(1)
      }
      if (n == 1) {
        this.progressIndex = index
        this.Tindex = -1
        item.isShow1 = !item.isShow1
      }
      if (n == 2) {
        this.Tindex = -1
        this.progressIndex = index
        item.isShow2 = !item.isShow2
      }
      if (n == 3) {
        this.Tindex = -1
        this.progressIndex = index
        item.isShow3 = !item.isShow3
        if (item.isShow3) {
          item.isShow4 = false
        }
        this.courseId = item.course_id
        this.getDetail(1)
      }
      if (n == 4) {
        item.isShow4 = !item.isShow4
        if (item.isShow4) {
          item.isShow3 = false
          this.courseId = item.course_id
          this.getDetail(2)
        }
      }
    },
  },
  beforeDestroy() {
    // 在组件销毁前执行的代码
    clearInterval(this.timer)
    // 例如，你可以在这里取消订阅事件、清除计时器、或者清理其他资源
  }
}
</script>

<style lang="scss" scoped>
.practicalVideo-page {
  width: 100%;
  height: 100%;
  .tree-box {
    width: 100%;
    margin: 0 auto;
    .tree-box-line {
      //background: #409EFF;
      margin: 5px 0;
      overflow: hidden;
      cursor: pointer;
      padding: 3px 0;
      color: rgba(0, 0, 0, 0.70);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tree-box-line-l {
        display: flex;
        align-items: center;
        img {
          width: 16px;
          height: 16px;
          margin-right: 10px;
        }
        .img1 {
          width: 12px;
          height: 12px;
        }
      }
      &:active {
        background: rgba(229, 238, 255, 1);
        color: #0158FD;
      }
    }
    .tree-box-line-active {
      background: rgba(229, 238, 255, 1);
      color: #0158FD;
    }
  }

  ::v-deep .el-select {
    height: 24px!important;
  }
  ::v-deep .el-input {
    height: 24px!important;
  }
  ::v-deep .el-input__inner {
    text-align: right;
    color: rgba(0, 0, 0, 0.70);
    border: none;
    height: 24px!important;
  }
  ::v-deep .el-input__suffix {
    display: none;
  }
}
</style>
